<template>
	<view>
		<u-navbar title="资料设置" :border-bottom='false'></u-navbar>
		<view class="main">
			<view class="userBox">
				<view class="info-li">
					<view class="lable">
						头像
					</view>
					<view class="imgBox" @click="showPop =true">
						<image class="touxiang" :src="userInfo.head_pic" mode=""></image>
						<u-icon class="icon" name="arrow-right" color="#999999" size="32"></u-icon>
					</view>
				</view>
				<view class="info-li">
					<view class="lable">
						昵称
					</view>
					<view class="imgBox" @click="navTo('./editName?textname='+userInfo.nickname+'&type=0')">
						<text>{{userInfo.nickname}}</text>
						<u-icon class="icon" name="arrow-right" color="#999999" size="32"></u-icon>
					</view>
				</view>
				<view class="info-li">
					<view class="lable">
						归属地
					</view>
					<view class="imgBox" @click="showRegion=true">
						<text>{{address}}</text>
						<u-icon class="icon" name="arrow-right" color="#999999" size="32" @click=""></u-icon>
					</view>
				</view>
				<view class="info-li">
					<view class="lable">
						手机号
					</view>
					<view class="text">
						{{userInfo.mobile}}
					</view>
				</view>
				<view class="info-li">
					<view class="lable">
						我的邀请码
					</view>
					<view class="text">
						<text>{{invite_code}}</text>
						<text style="color:#3587F7;margin-left: 10rpx;" @click="copy">复制</text>
					</view>
				</view>
        <view class="info-li">
          <view class="lable">
            交易密码
          </view>
          <view class="text" @click="navTo('../paypwd/addpwd')">
            <text>设置</text>
            <u-icon class="icon" name="arrow-right" color="#999999" size="32" ></u-icon>
          </view>
        </view>
			</view>
			<view class="webang">
				<view class="lable">
					绑定微信
				</view>
				<view class="text" @click="wechatBang" v-if="unionid == 'null'">
					绑定微信
				</view>
				<view class="text" @click="wechatBangdel" v-else>
					解除绑定
				</view>
			</view>
			<view class="out" @click="loginOut">
				退出登录
			</view>
		</view>
		<u-popup v-model="showPop" mode="bottom" :mask-close-able='false'>
			<view class="popBox">
				<view class="topBtn">
					<view class="btn" @click="chosseAlbum">
						相册上传
					</view>
					<view class="btn" @click="chooseCamera">
						手机拍照
					</view>
				</view>
				<view class="botBtn" @click="showPop =false">
					取消
				</view>
			</view>
		</u-popup>

		<u-picker v-model="showRegion" mode="region" @confirm="confirmFn"></u-picker>
	</view>
</template>

<script>
	import myRequest from '@/api/index.js'
	export default {
		data() {
			return {
				showRegion: false,
				showPop: false,
				userInfo: {},
				address: '请设置归属地',
				unionid: '',
				invite_code: '',
				isWx: false,
			}
		},
		onShow() {
			this.getUserInfo()
			this.getInvite()
			this.showPop = false
		},
		methods: {
			// 复制
			copy() {
				let {
					invite_code
				} = this
				uni.setClipboardData({
					data: invite_code,
					success: function() {
						uni.showToast({
							title: '复制成功'
						})
					}
				})
			},
			// 获取邀请码
			async getInvite() {
				let res = await myRequest.getInvitecode()
				if (res.status) {
					this.invite_code = res.invite_code
				}
			},
			loginOut() {
				uni.showModal({
					content: '确定退出登录',
					success(res) {
						if (res.confirm) {
							uni.removeStorage({
								key: 'token',
								success() {
									uni.navigateTo({
										url: '../../login/login'
									})
								}
							})
						}
					}
				})
			},
			// 地区选择
			async confirmFn(e) {
				let province = e.province.label
				let province_code = e.province.value + '0000'
				let city = e.city.label
				let city_code = e.city.value + '00'
				let district = e.area.label
				let district_code = e.area.value
				let res = await myRequest.editUserInfo({
					province,
					province_code,
					city,
					city_code,
					district,
					district_code
				})
				if (res.status) {
					this.getUserInfo()
				}
			},
			async wechatBangdel() {
				let that = this
				let res = await myRequest.editUserInfo({
					unionid: null
				})
				if (res.status) {
					console.log(res)
					uni.showToast({
						title: '解绑成功',
						icon: 'none',
						success() {
							that.getUserInfo()
							uni.removeStorageSync('unionid')
							uni.removeStorageSync('openid')
						}
					})
				}
			},
			async wechatBang() {
				let that = this
				let unionid = uni.getStorageSync('unionid')
				let openid = uni.getStorageSync('openid')
				if (unionid || openid) {
					let res = await myRequest.editUserInfo({
						unionid: unionid,
						openid: openid
					})
					if (res.status) {
						uni.showToast({
							title: '绑定成功'
						})
						this.getUserInfo()
					}
				} else {
					uni.getProvider({
						service: 'oauth',
						success: function(res) {
							if (~res.provider.indexOf('weixin')) {
								uni.login({
									provider: 'weixin',
									success: function(loginRes) {
										let openid = loginRes.authResult.openid
										let unionid = loginRes.authResult.unionid
										uni.setStorage({
											key: 'unionid',
											data: unionid
										})
										uni.setStorage({
											key: 'openid',
											data: openid
										})
									}
								});
							}
						}
					});
				}
			},
			// 获取用户信息
			async getUserInfo() {
				let res = await myRequest.getUserInfo()
				if (res.status) {
					this.userInfo = res.data
					this.address = this.userInfo.province + ' ' + this.userInfo.city + ' ' + this.userInfo.district
					this.unionid = this.userInfo.unionid
					// console.log(this.userInfo.unionid)
				}
			},
			// 从相册选择
			chosseAlbum() {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					sourceType: ['album'],
					success: function(res) {
						let imgFiles = res.tempFilePaths
						that.uploadImg(imgFiles)
					}
				})
			},
			// 拍照
			chooseCamera() {
				let that = this
				uni.chooseImage({
					sizeType: ['original'],
					sourceType: ['camera'],
					success: function(res) {
						let imgFiles = res.tempFilePaths
						that.uploadImg(imgFiles)
					}
				})
			},
			// 图片上传
			uploadImg(imgFiles) {
				let that = this
				uni.uploadFile({
					url: that.$baseURL + 'upload/up',
					filePath: imgFiles[0],
					name: 'file',
					success: (uploadFileRes) => {
						let obj = JSON.parse(uploadFileRes.data)
						if (obj.status) {
							that.editHeadpic(obj.path)
						}
					}
				});
			},

			// 修改用户头像
			async editHeadpic(path) {
				let res = await myRequest.editUserInfo({
					head_pic: path
				})
				if (res.status) {
					this.showPop = false
					// 更新成功,刷新数据
					this.getUserInfo()
				}
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 40rpx 28rpx 0;

		.userBox {
			width: 694rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 24rpx 22rpx 0;

			.info-li {
				width: 100%;
				height: 88rpx;
				border-bottom: 2rpx solid #F2F2F7;
				display: flex;
				align-items: center;

				.touxiang {
					margin-right: 8rpx;
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
				}

				.icon {
					margin-left: auto;
				}

				.imgBox {
					margin-left: auto;
					display: flex;
					align-items: center;

					text {
						margin-right: 8rpx;
					}
				}

				.text {
					margin-left: auto;
					font-size: 28rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #333333;
				}
			}

			.info-li:last-child {
				border-bottom: none
			}
		}
	}

	.popBox {
		padding: 0 28rpx;

		.topBtn {
			width: 694rpx;
			height: 176rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 0 10rpx;

			.btn {
				height: 88rpx;
				text-align: center;
				line-height: 88rpx;
			}

			.btn:last-child {
				border-top: 2rpx solid #F2F2F7;
			}
		}

		.botBtn {
			width: 694rpx;
			height: 100rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-bottom: 32rpx;
			margin-top: 48rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 32rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #333333;
		}
	}

	.webang {
		width: 694rpx;
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 22rpx;

		.lable {
			font-size: 28rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #333333;
		}

		.text {
			font-size: 28rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #3587F7;
		}
	}

	.out {
		margin-top: 88rpx;
		width: 694rpx;
		height: 88rpx;
		background: #DFDEE2;
		border-radius: 16rpx;
		font-size: 28rpx;
		text-align: center;
		font-family: PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 88rpx;
	}

	/deep/ .u-drawer-content {
		background-color: rgba(255, 255, 255, 0);
	}
</style>
